<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CIS-MSP</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/jsp/huazhi/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/jsp/huazhi/style/admin.css" media="all">
    <link rel="shortcut icon" href="<%=request.getContextPath()%>/jsp/hz/favicon.ico"/>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div id="container" style="height: 400px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="<%=request.getContextPath()%>/jsp/huazhi/layui/layui.js"></script>
<script src="<%=request.getContextPath()%>/jsp/huazhi/layui/jquery-min.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.12&key=b51f3248d9ad4e26ad1841c5a558f596">
    <
    script >
    layui.config({
        base: '<%=request.getContextPath()%>/jsp/huazhi/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'laydate'], function () {
        var $ = layui.$
            , form = layui.form
            , laydate = layui.laydate
            , layer = layui.layer;


    });

    $(function () {
        var map = new AMap.Map('container', {
            resizeEnable: true,
            center: [109.509597, 18.773616],//设置地图中心点坐标
            zoom: 11, //设置地图显示的缩放级别
            viewMode: '2D',  //设置地图模式
            lang: 'zh_cn',  //设置地图语言类型

        });

        window.setTimeout(function () {
            addCloudLayer(map)
        }, 100)
    })

    window.setTimeout(function () {
        addCloudLayer(map)
    }, 100)

    function addCloudLayer(map) {
        $.ajax({
            type: "post",
            url: "<%=request.getContextPath()%>/rest/smoke/getLinedAll",
            dataType: "json",
            async: false,
            success: function (res) {
                if (res.data != null) {
                    var Lineds = res.data
                    for (var i = 0; i < Lineds.length; i++) {
                        var oneLined = Lineds[i]
                        var redOrGreen = ''
                        if (oneLined.state == 0) {
                            redOrGreen = 'Green2.png'
                        } else {
                            redOrGreen = 'Red3.gif'
                            makeTable(oneLined)
                        }
                        var oneMaker = new AMap.Marker({
                            icon: "<%=request.getContextPath()%>/huazhi/images/point" + redOrGreen,
                            map: map,
                            position: [oneLined.jingdu, oneLined.weidu],
//                position:[116.397428, 39.90923],
                            clickable: true,
                        });
                        // 设置label标签
                        // label默认蓝框白底左上角显示，样式className为：amap-marker-label
                        oneMaker.setLabel({
                            offset: new AMap.Pixel(0, 0),  //设置文本标注偏移量
                            content: "<div class='info'>" + oneLined.cun + "</div>", //设置文本标注内容
                            direction: 'bottom' //设置文本标注方位
                        });
                        var _onClick = function (e) {
                            details(oneLined.cun, oneLined.videotid, oneLined.videoUrl);
                        }
                        AMap.event.addListener(oneMaker, 'click', _onClick);


                    }


                }
            }
        })

        jQuery(".txtMarquee-top").slide({
            mainCell: ".bd ul",
            autoPlay: true,
            effect: "topMarquee",
            vis: 2,
            interTime: 100
        });


        <%--var oneMaker = new AMap.Marker({--%>
        <%--icon: "<%=request.getContextPath()%>/jsp/huazhi/layui/images/pointGreen2.png",--%>
        <%--map: map,--%>
        <%--position: [109.541415,18.745042],--%>
        <%--//                position:[116.397428, 39.90923],--%>
        <%--clickable: true,--%>
        <%--});--%>
        <%--// 设置label标签--%>
        <%--// label默认蓝框白底左上角显示，样式className为：amap-marker-label--%>
        <%--oneMaker.setLabel({--%>
        <%--offset: new AMap.Pixel(0, 0),  //设置文本标注偏移量--%>
        <%--content: "<div class='info'>什翁污水点</div>", //设置文本标注内容--%>
        <%--direction: 'bottom' //设置文本标注方位--%>
        <%--});--%>
        <%--var _onClick = function (e) {--%>
        <%--details();--%>
        <%--}--%>
        <%--AMap.event.addListener(oneMaker, 'click', _onClick);--%>


        <%--var oneMaker2 = new AMap.Marker({--%>
        <%--icon: "<%=request.getContextPath()%>/jsp/huazhi/layui/images/pointGreen2.png",--%>
        <%--map: map,--%>
        <%--position: [109.513434,18.686187],--%>
        <%--//                position:[116.397428, 39.90923],--%>
        <%--clickable: true,--%>
        <%--});--%>
        <%--// 设置label标签--%>
        <%--// label默认蓝框白底左上角显示，样式className为：amap-marker-label--%>
        <%--oneMaker2.setLabel({--%>
        <%--offset: new AMap.Pixel(0, 0),  //设置文本标注偏移量--%>
        <%--content: "<div class='info'>番道污水点</div>", //设置文本标注内容--%>
        <%--direction: 'bottom' //设置文本标注方位--%>
        <%--});--%>
        <%--var _onClick2 = function (e) {--%>
        <%--details();--%>
        <%--}--%>
        <%--AMap.event.addListener(oneMaker2, 'click', _onClick2);--%>



        <%--var oneMaker3 = new AMap.Marker({--%>
        <%--icon: "<%=request.getContextPath()%>/jsp/huazhi/layui/images/pointRed2.png",--%>
        <%--map: map,--%>
        <%--position: [109.391211,18.722933],--%>
        <%--//                position:[116.397428, 39.90923],--%>
        <%--clickable: true,--%>
        <%--});--%>
        <%--// 设置label标签--%>
        <%--// label默认蓝框白底左上角显示，样式className为：amap-marker-label--%>
        <%--oneMaker3.setLabel({--%>
        <%--offset: new AMap.Pixel(0, 0),  //设置文本标注偏移量--%>
        <%--content: "<div class='info'>红沟村污水点</div>", //设置文本标注内容--%>
        <%--direction: 'bottom' //设置文本标注方位--%>
        <%--});--%>
        <%--var _onClick3 = function (e) {--%>
        <%--details();--%>
        <%--}--%>
        <%--AMap.event.addListener(oneMaker3, 'click', _onClick3);--%>


        <%--var oneMaker4 = new AMap.Marker({--%>
        <%--icon: "<%=request.getContextPath()%>/jsp/huazhi/layui/images/pointGreen2.png",--%>
        <%--map: map,--%>
        <%--position: [109.646471,18.781939],--%>
        <%--//                position:[116.397428, 39.90923],--%>
        <%--clickable: true,--%>
        <%--});--%>
        <%--// 设置label标签--%>
        <%--// label默认蓝框白底左上角显示，样式className为：amap-marker-label--%>
        <%--oneMaker4.setLabel({--%>
        <%--offset: new AMap.Pixel(0, 0),  //设置文本标注偏移量--%>
        <%--content: "<div class='info'>军民村污水点</div>", //设置文本标注内容--%>
        <%--direction: 'bottom' //设置文本标注方位--%>
        <%--});--%>
        <%--var _onClick4 = function (e) {--%>
        <%--details();--%>
        <%--}--%>
        <%--AMap.event.addListener(oneMaker4, 'click', _onClick4);--%>


    }


</script>
</body>
</html>

